<?php
namespace App\Admin\Controllers;
use Dcat\Admin\Admin;
use Illuminate\Contracts\Support\Renderable;

class AdminMsg implements Renderable{
    public $defaultDarkMode = false;

    public function __construct(?bool $defaultDarkMode = null)
    {
        $this->defaultDarkMode = is_null($defaultDarkMode) ? Admin::isDarkMode() : $defaultDarkMode;
    }
    public function render()
    {
        $icon = $this->defaultDarkMode ? 'icon-sun' : 'icon-moon';

        return <<<HTML
<a href="https://www.example.com/messages" class="message-button">
  消息
  <span class="badge unread-count">3</span>
</a>
<style>.message-button {
  position: relative;
  /* 其他样式 */
}

.badge {
  /* 红点样式 */
  display: inline-block;
  /*background-color: red;*/
  color: white;
  font-size: small;
  line-height: 1em;
  min-width: 1em;
  height: 1em;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  top: -0.5em;
  right: -0.5em;
}

/* 可选，仅当有未读消息时才显示红点 */
.unread-count {
  display: none;
}

.unread-count:not(:empty) {
  display: block;
  color: red;
}
</style>

<script>// 假设unreadCount是从服务器获取的未读消息数量
let unreadCount = 0; // 替换为实际获取的数据
//js每隔3秒发送一个ajax到服务器获取最新的数字
// 假设有一个函数用来发送Ajax请求并处理返回的未读消息数量
 function fetchUnreadCount() {

  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/api/test', true);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText).data);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}
// 使用setInterval每隔3秒调用fetchUnreadCount函数并更新页面上的未读消息数量
setInterval(async () => {
  try {
           fetchUnreadCount().then(
              (data) => {
                    document.querySelector('.unread-count').textContent = data;
              }
          );
  } catch (error) {
    console.error('Failed to fetch unread count:', error);
  }
}, 3000);
// 更新红点显示的未读消息数量
document.querySelector('.unread-count').textContent = unreadCount;
// 如果不需要单独处理点击红点的事件（即点击整个按钮都会跳转），则无需额外JS代码
</script>

HTML;
    }
}
?>
